import React, { lazy, Suspense } from "react";

const BasicLayout = lazy(() => import("@/layouts/basicLayout"));
const Home = lazy(() => import("@/pages/Home"));
const Login = lazy(() => import("@/pages/login"));
const NoMatch = lazy(() => import("@/pages/404"));
const UserManage = lazy(() => import("@/pages/userCenter/userManage"));
const UserGroupManage = lazy(
  () => import("@/pages/userCenter/userGroupManage")
);
import { WelcomePage } from "./../pages/welcome/index";

const routes = [
  {
    path: "/login",
    title: "登录",
    hiddenInMenu: true,
    noAuth: true,
    component: <Login />,
  },
  {
    path: "*",
    title: "404",
    hiddenInMenu: true,
    noAuth: true,
    component: <NoMatch />,
  },
  {
    path: "/welcome",
    title: "欢迎页",
    hiddenInMenu: true,
    noAuth: true,
    component: <WelcomePage />,
  },
  {
    path: "/home",
    redirect: "/home",
    title: "首页",
    component: <Home />,
  },
  {
    path: "/userCenter",
    title: "用户中心",
    icon: "TeamOutlined",
    children: [
      {
        path: "/userCenter/userManage",
        title: "用户管理",
        component: <UserManage />,
      },
      {
        path: "/userCenter/userGroupManage",
        title: "用户组管理",
        component: <UserGroupManage />,
      },
    ],
  },
];

interface Route {
  path: string;
  component: React.ComponentType;
  hiddenInMenu: boolean;
  children?: Route[];
}

// 懒加载
// const syncRouter = (table: Route[]): Route[] => {
//   let mRouteTable: Route[] = [];
//   table.forEach((route) => {
//     mRouteTable.push({
//       ...route,
//       element: (
//         <Suspense fallback={<div>路由加载中...</div>}>
//           <route.component />
//         </Suspense>
//       ),
//       children: route.children && syncRouter(route.children),
//     });
//   });
//   return mRouteTable;
// };

// export const newRoutes = syncRouter(routes);

export const newRoutes = routes;
